<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <TableFilter :work-order-type="workOrderType" :new-visible="newVisible" />
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        :multiple-selected="false"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :width="column.width" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button v-if="row.optionBtns && row.optionBtns.indexOf('edit')>-1 || row.status === 'revoked'" type="text" title="编辑" size="mini" icon="el-icon-edit" @click="edit(row)" />
            <el-button v-if="row.optionBtns && row.optionBtns.indexOf('delete')>-1" type="text" title="删除" size="mini" icon="el-icon-delete" @click="remove(row.workOrderNum)" />
            <el-button v-if="row.optionBtns && row.optionBtns.indexOf('handle')>-1" type="text" title="处理" size="mini" icon="el-icon-coordinate" @click="handle(row)" />
            <el-button v-if="showRevokeBtn(row)" type="text" title="撤销" size="mini" icon="el-icon-back" @click="revoke(row.workOrderNum)" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>
    <EditForm v-if="dialogTaskVisible" :work-order-num="workOrderNum" :view-type="formHistoryView" @cancelNewOrderForm="cancelNewOrderForm" />
    <InitForm v-if="dialogFormVisible" :view-type="newOrderFormView" :work-order-num="workOrderNum" :work-order-type="workOrderType==''?workOrderTypeMix:workOrderType" :order-status="orderStatus" @cancelNewOrderForm="cancelNewOrderForm" />
    <ViewDialog class="fixed-dialog-height" title="查看流程" :show.sync="dialogViewVisible" width="90%" @on-cancel="processCancel">
      <ProcessForm v-if="dialogViewVisible" :work-order-num="workOrderNum" />
    </ViewDialog>
  </div>
</template>

<script>
const My_Order = 'me'
const To_Do_Order = 'todo'
const Done_Order = 'done'
import InitForm from './components/initForm'
import TableFilter from './components/tableFilter'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import EditForm from './components/editForm'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import { formatDate } from '@neu/biz-core/utils/utils'
import { page, todoPage, donePage, revoke, remove } from '@neu/dcam-ui/api/workOrder'
import { findByDictionaryType } from '@neu/dcam-ui/api/dictionary'
import ViewDialog from '@neu/biz-core/components/ViewDialog'
import ProcessForm from './components/process'

export default {
  name: 'WorkerOrderPage',
  components: {
    TableFilter,
    EditForm,
    PageableTable,
    InitForm,
    ViewDialog,
    ProcessForm
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  data() {
    return {
      r: page,
      d: remove,
      insideColumns: [
        { title: '工单号', key: 'workOrderNum', sortable: 'custom', display: true, width: 180,
          render: (h, params) => { // 查看功能
            if (params.row.optionBtns && params.row.optionBtns.indexOf('view') > -1) {
              return h('span', [
                h('el-link', {
                  class: 'font-12',
                  attrs: { title: params.row.workOrderNum },
                  props: { type: 'primary' },
                  on: { click: () => { this.view(params.row) } }},
                params.row.workOrderNum)
              ])
            } else {
              return h('span', params.row.workOrderNum)
            }
          }
        },
        { title: '标题', key: 'title', sortable: 'custom', display: true },
        { title: '工单类型', key: 'type', sortable: 'custom', display: true, render: (h, params) => {
          const source = this.workOrderTypes.filter(t => {
            return t.code === params.row.type
          })
          const sourceDesc = source.length === 1 ? source[0].text : params.row.type
          return h('span', [
            h('span', sourceDesc)
          ])
        } },
        { title: '工单状态', key: 'status', sortable: 'custom', display: true,
          render: (h, params) => { // 查看功能
            return h('span', [
              h('el-tag', params.row.statusName)
            ])
          }
        },
        { title: '当前处理节点', key: 'currentNode', display: true,
          render: (h, params) => { // 查看功能
            return h('span', [
              h('el-link', {
                class: 'font-12',
                attrs: { title: params.row.currentNode },
                props: { type: 'primary' },
                on: { click: () => { this.viewProcess(params.row) } }},
              params.row.currentNode)
            ])
          }
        },
        { title: '当前处理人', key: 'currentNodeUser', display: true },
        { title: '申请人', key: 'applyUserName', sortable: 'custom', display: true },
        { title: '申请时间', key: 'createTime', sortable: 'custom', render: (h, params) => { return h('span', formatDate(params.row.createTime)) }, display: true }

      ],
      dialogFormVisible: false,
      dialogStatus: 'create',
      editId: -1,
      /** 新建按钮是否显示*/
      newVisible: true,
      /** 工单类型 */
      workOrderType: '',
      /** 工单类型 */
      workOrderTypeMix: '',
      workOrderNum: -1,
      orderStatus: '',
      /** 判断是编辑工单还是查看工单(第一个表单) */
      newOrderFormView: false,
      /** 历史履历显示与否 */
      dialogTaskVisible: false,
      /** 编辑工单还是查看工单(履历形式) */
      formHistoryView: false,
      workOrderTypes: [],
      /** 查看流程图是否显示 */
      dialogViewVisible: false,
      /** 混入条件 */
      tableSort: { dataIndex: 'updateTime', order: 'desc' }
    }
  },
  created() {
    const workOrder = this.$route.meta
    if (workOrder) {
      this.workOrderType = workOrder.workOrderType === undefined ? '' : workOrder.workOrderType
      const order = workOrder.workOrderRequest
      if (order === My_Order) {
        this.r = page
        this.newVisible = true
      } else if (order === To_Do_Order) {
        this.r = todoPage
        this.newVisible = false
      } else if (order === Done_Order) {
        this.r = donePage
        this.newVisible = false
      }
    } else {
      console.error('路由信息有误')
    }

    this.filter({ 's_type': this.workOrderType })

    findByDictionaryType('workOrderType').then(response => {
      this.workOrderTypes = response.data
    })
  },
  methods: {
    view(row) {
      this.workOrderNum = row.workOrderNum
      this.workOrderTypeMix = row.type

      if (row.instanceId) {
        this.formHistoryView = true
        this.dialogTaskVisible = true
      } else {
        this.newOrderFormView = true
        this.dialogFormVisible = true
      }
    },
    edit(row) {
      this.newOrderFormView = false
      this.workOrderTypeMix = row.type
      this.workOrderNum = row.workOrderNum
      this.orderStatus = row.status
      this.dialogFormVisible = true
    },
    handle(data) {
      this.workOrderTypeMix = data.type
      this.workOrderNum = data.workOrderNum
      this.formHistoryView = false
      this.dialogTaskVisible = true
    },
    revoke(data) {
      this.$confirm('确定要撤销吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        revoke(data).then(res => {
          this.$message({
            showClose: true,
            message: '撤销成功！',
            type: 'success'
          })
          this.refresh()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    cancelNewOrderForm(data) {
      this.dialogFormVisible = false
      this.dialogTaskVisible = false
      if (data === 'refresh') {
        this.refresh()
      }
    },
    /** 查看流程图 */
    viewProcess(data) {
      this.workOrderNum = data.workOrderNum
      this.dialogViewVisible = true
    },
    processCancel() {
      this.dialogViewVisible = false
    },
    // 安徽特殊化处理
    showRevokeBtn(row) {
      let flag = false
      if (row.optionBtns && row.optionBtns.indexOf('revoke') > -1) {
        if ((row.type === 'JieyongSL' && row.currentNode === '资产借用确认') || (row.type === 'LingyongSL' && row.currentNode === '资产领用确认')) {
          flag = false
        } else {
          flag = true
        }
      }
      return flag
    }
  }
}
</script>
